﻿@page "/tree-grid/checkbox-selection"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p> This sample demonstrates the selection functionality of the Tree Grid using checkbox selection. To select and unselect all the rows, use header checkbox. To select/unselect a particular row, click the desired row.</p>
</SampleDescription>
<ActionDescription>
   <p>Tree Grid mutliple selection can be achieved with the help of checkbox in each row. To render checkbox in each Tree Grid row, you need
     to define column type as <code>Checkbox</code> using the <code>TreeGridColumn->Type</code> property.</p>
    <p>Selection can be persisted on all the operations using the <code>TreeGridSelectionSettings-> PersistSelection</code> property. For persisting selection on the Tree Grid, any one of the column should be defined as a primary key using the <code> TreeGridColumn->IsPrimaryKey</code> property.</p>
    <p> In this demo, Tree Grid mutliple selection has been enabled with selection persistance.</p>
    <p> More information on the checkbox selection configuration can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/selection/#checkbox-selection'>documentation section.</a> </p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="2" Height="315">
                <TreeGridSelectionSettings PersistSelection="true" CheckboxOnly="true"></TreeGridSelectionSettings>
                <TreeGridColumns>
                    <TreeGridColumn Type="Syncfusion.Blazor.Grids.ColumnType.CheckBox" IsPrimaryKey="true" Width="50"></TreeGridColumn>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();
    }
}
